<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset=utf-8>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0">
    <title>拖拽</title>
    <style>
        html,body{
            width: 100%;
            height:100%;
        }
        *{
            margin: 0;
            padding:0;
            list-style: none;
        }

        .card{
            width: 200px;
            height: 300px;
            background-color: #ff5173;
            border-radius: 20px;
            position: absolute;
            left: 200px;
            top: 100px;
        }
    </style>
</head>
<body>

<div class="card"></div>

</body>
</html>
<script>
    const card = document.querySelector('.card')
    let posX,posY,isTouch = false;
    card.onmousedown = function (e) {
      posX = e.offsetX;
      posY = e.offsetY;
      isTouch = true;
      document.onmousemove = function (event) {
        if(isTouch){
          let pageX = event.clientX - posX;
          let pageY = event.clientY - posY;
          let width = window.innerWidth - e.target.offsetWidth,
            height = window.innerHeight - e.target.offsetHeight;

          if (pageY <= 0) {
            pageY = 0;
          }
          if (pageY >= height) {
            pageY = height;
          }
          if (pageX <= 0) {
            pageX = 0;
          }
          if (pageX >= width) {
            pageX = width;
          }
          card.style['left'] = pageX + 'px';
          card.style['top'] =  pageY + 'px'
        }
      }

      document.onmouseup = function () {
        isTouch = false;
        document.onmousemove = document.onmouseup = null;
      }
    }

</script>